<!--各省份订单以及订单金额统计页面-->
<template>
  <el-row :gutter="24" class="el-row">
    <el-col :span="12" class="el-card">
      <!--各省份订单-->
      <div ref="mapChart" style="width: 100%; height: 400px"/>
    </el-col>
    <el-col :span="12" class="el-card">
      <!--各省份订单金额统计页面-->
      <div ref="mapChartMoney" style="width: 100%; height: 400px"/>
    </el-col>
  </el-row>
</template>


<script>
import * as echarts from 'echarts';
import api from '@/api/statistics/order/order'
import axios from "axios";

export default {
  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.init();
  },

  data() {
    return {
      mapJson: {},
      areaNumData: [],
      areaMoneyData: [],
      numMin: 0,
      numMax: 0,
      moneyMin: 0,
      moneyMax: 0,
      searchObj: {
        recentDays: this.$parent.recentDays,
        dt: this.$parent.curDate
      }
    };
  },
  methods: {

    init() {
      this.searchObj.recentDays = this.$parent.recentDays
      this.searchObj.dt = this.$parent.curDate
      this.getOrderNumProvinceData(this.searchObj)
      this.getOrderMoneyProvinceData(this.searchObj)
    },
    //订单统计接口
    getOrderNumProvinceData(searchObj) {
      api.getOrderNumProvinceData(searchObj).then(response => {
        if (response.data.length > 0) {
          this.areaNumData = response.data
        }
        this.numMin = parseInt(this.areaNumData[0].value)
        this.numMax = parseInt(this.areaNumData[this.areaNumData.length - 1].value)
        this.setChartData();

      }).catch(response => {
        console.log('失败' + response)
      })
    },
    //订单金额统计接口
    getOrderMoneyProvinceData(searchObj) {
      api.getOrderMoneyProvinceData(searchObj).then(response => {
        if (response.data.length > 0) {
          this.areaMoneyData = response.data
        }
        this.moneyMin = parseInt(this.areaMoneyData[0].value)
        this.moneyMax = parseInt(this.areaMoneyData[this.areaMoneyData.length - 1].value)
        this.setChartMoney();

      }).catch(response => {
        console.log('失败' + response)
      })
    },
    setChartData() {
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById("mapChart"));
      var myChart = echarts.init(this.$refs.mapChart);
      myChart.showLoading();

      axios.get("china.json").then((response) => {
        this.mapJson = response.data;

        myChart.hideLoading();

        echarts.registerMap("CHN", this.mapJson);
        const option = {
          title: {
            text: "各省份订单数统计",
            subtext: this.$parent.dateRange,
            left: "center",
          },
          tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              var value = (params.value + "").split(".");
              value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");
              return params.seriesName + "<br/>" + params.name + ": " + value;
            },
          },
          visualMap: {
            left: "right",
            min: this.numMin,
            max: this.numMax,
            inRange: {
              color: ["#FACE9C", "#B6292B"],
            },
            text: ["High", "Low"], // 文本，默认为数值文本
            calculable: true,
          },
          toolbox: {
            show: true,
            //orient: 'vertical',
            left: "right",
            top: "top",
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {},
            },
          },
          series: [
            {
              name: "订单数",
              type: "map",
              roam: true,
              map: "CHN",
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: this.areaNumData,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.clear()
        myChart.setOption(option);
      });
    },
    setChartMoney() {
      // 基于准备好的dom，初始化echarts实例
      var myChartByMoney = echarts.init(this.$refs.mapChartMoney);
      myChartByMoney.showLoading();

      axios.get("china.json").then((response) => {
        this.mapJson = response.data;

        myChartByMoney.hideLoading();

        echarts.registerMap("CHN", this.mapJson);
        const optionMoney = {
          title: {
            text1: "各省份订单金额统计",
            subtext1: this.$parent.dateRange,
            left: "center",
          },
          tooltip: {
            trigger: "item",
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
              var value = (params.value + "").split(".");
              value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");
              return params.seriesName + "<br/>" + params.name + ": " + value;
            },
          },
          visualMap: {
            left: "right",
            min: this.moneyMin,
            max: this.moneyMax,
            inRange: {
              color: ["#00ff00", "#0000ff"],
            },
            text: ["High", "Low"], // 文本，默认为数值文本
            calculable: true,
          },
          toolbox: {
            show: true,
            //orient: 'vertical',
            left: "right",
            top: "top",
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {},
            },
          },
          series: [
            {
              name: "订单金额",
              type: "map",
              roam: true,
              map: "CHN",
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: this.areaMoneyData,
            },
          ],
        };
        myChartByMoney.clear()
        myChartByMoney.setOption(optionMoney)
      });
    }
  }
};
</script>


